<template>
  <div class="main">
    <el-container class="main-container">
      <el-aside :width="isCollapse ? '60px' : '210px'" class="main-aside">
        <navMenu :collapse="isCollapse"></navMenu>
      </el-aside>
      <el-container>
        <el-header class="main-header">
          <NavHeader @handle-fold-click="handleFoldClick"></NavHeader>
        </el-header>
        <el-main class="main-cont">
          <div class="page">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import navMenu from '@/components/nav-menu';
import NavHeader from '@/components/nav-header/src/nav-header.vue';
import { ref } from 'vue';
const isCollapse = ref(false);
const handleFoldClick = (value: boolean) => {
  isCollapse.value = value;
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  .main-container {
    height: 100%;
    display: flex;
    .main-aside {
      height: 100%;
      background-color: #00142c;
    }

    .main-header {
      background-color: #fffffe;
    }

    .main-cont {
      background: #f3f1f7;
      .page {
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
    }
  }
}
</style>
